import React, { useState } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Form, Input, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useAppDispatch } from '@/hooks'
import { postLoginAsync } from '@/store/slice/auth'
import styles from './index.module.less'

function Login() {
    const navigate = useNavigate()
    const [isLoading, setIsLoading] = useState(false) // 是否正在登录Button状态
    const dispatch = useAppDispatch()
    const onSubmit = async (values: any) => {
        setIsLoading(true)
        try {
            await dispatch(postLoginAsync(values))
            message.success('登陆成功')
            setIsLoading(false)
            navigate('/')
        } catch (err) {
            console.log(isLoading)

            setIsLoading(false)
        }
    }
    return (
        <div className={styles.login}>
            <div>
                <h1>后台管理系统</h1>
                <Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={onSubmit}>
                    <Form.Item name="username" rules={[{ required: true, message: '请输入管理员账号！' }]}>
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                    </Form.Item>
                    <Form.Item name="password" rules={[{ required: true, message: '请输入管理员密码！' }]}>
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button loading={isLoading} type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login
